<template>
  <div class="public-views">
    <div class="public-inner">
      <div class="list-wrap clearFix">
        <div class="wrap-left">
          <h3 class="home-title">最新游戏</h3>
          <ul class="list-item">
            <li :class="'item-' + (index + 1)" v-for="(item, index) in ListData.new">
              <i>{{index
                < 10 ? '' : index + 1}}</i>
                  <div class="li-left">
                    <i v-lazy:background-image="item.icon"></i>
                  </div>
                  <div class="li-center">
                    <h3>{{item.name}}</h3>
                    <p>{{item.size}}M</p>
                    <i v-if="item.device === 'h5' || item.type === 'ios'" class="iconfont icon-pingguo ios"></i>
                    <i v-if="item.device === 'h5' || item.type === 'android'" class="iconfont icon-anzhuo android"></i>
                  </div>
                  <div class="li-right">
                    <a href="javascript:;">下载</a>
                    <p>下载5.6万</p>
                  </div>
                  <div class="li-bottom" v-if="item.activate">
                    <div class="bottom-left">
                      <p>手机下载</p>
                      <img v-lazy="item.qrCode" alt="">
                    </div>
                    <div class="bottom-right">
                      <p>电脑端下载</p>
                      <a href="javascript:;">
                        <i class="iconfont icon-anzhuo android"></i>安卓包下载</a>
                      <a href="javascript:;">
                        <i class="iconfont icon-pingguo ios"></i>苹果包下载</a>
                    </div>
                  </div>
            </li>
          </ul>
        </div>
        <div class="wrap-center">
          <h3 class="home-title">最热游戏</h3>
          <ul class="list-item">
            <li :class="'item-' + (index + 1)" v-for="(item, index) in ListData.new">
              <i>{{index
                < 10 ? '' : index + 1}}</i>
                  <div class="li-left">
                    <i v-lazy:background-image="item.icon"></i>
                  </div>
                  <div class="li-center">
                    <h3>{{item.name}}</h3>
                    <p>{{item.size}}M</p>
                    <i v-if="item.device === 'h5' || item.type === 'ios'" class="iconfont icon-pingguo ios"></i>
                    <i v-if="item.device === 'h5' || item.type === 'android'" class="iconfont icon-anzhuo android"></i>
                  </div>
                  <div class="li-right">
                    <a href="javascript:;">下载</a>
                    <p>下载5.6万</p>
                  </div>
                  <div class="li-bottom" v-if="item.activate">
                    <div class="bottom-left">
                      <p>手机下载</p>
                      <img v-lazy="item.qrCode" alt="">
                    </div>
                    <div class="bottom-right">
                      <p>电脑端下载</p>
                      <a href="javascript:;">
                        <i class="iconfont icon-anzhuo android"></i>安卓包下载</a>
                      <a href="javascript:;">
                        <i class="iconfont icon-pingguo ios"></i>苹果包下载</a>
                    </div>
                  </div>
            </li>
          </ul>
        </div>
        <div class="wrap-right">
          <h3 class="home-title">H5游戏</h3>
          <ul class="list-item">
            <li :class="'item-' + (index + 1)" v-for="(item, index) in ListData.new">
              <i>{{index
                < 10 ? '' : index + 1}}</i>
                  <div class="li-left">
                    <i v-lazy:background-image="item.icon"></i>
                  </div>
                  <div class="li-center">
                    <h3>{{item.name}}</h3>
                    <p class="h5-label">
                      <span>{{item.type}}</span>
                      <span>{{item.label}}</span>
                    </p>
                    <p class="h5-online">玩家5.6万</p>
                  </div>
                  <div class="li-right">
                    <a class="open-h5-game" href="javascript:;">开始</a>
                  </div>
                  <div class="li-bottom" v-if="item.activate">
                    <div class="bottom-left">
                      <p>手机玩</p>
                      <img v-lazy="item.qrCode" alt="">
                    </div>
                    <div class="bottom-right">
                      <p>电脑玩</p>
                      <a class="pc-h5-game" href="javascript:;">
                        <i class="iconfont icon-diannao"></i>电脑玩</a>
                    </div>
                  </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="loading-spin" id="loading">
        <span>正在加载...</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1
    }
  },
  title() {
    return `米娱游戏_榜单列表`
  },
  asyncData({ store, route }) {
    const data = { page: 1, cache: true }
    return store.dispatch('fetchListData', data)
  },
  computed: {
    ListData: function() {
      return this.$store.state.ListData ={
          new:[{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152","qrCode":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"}],
          
      }
    }
  },
  methods: {
    // 取榜单数据
    fetchListData(page) {
      const data = { page: page, cache: true  }
      this.$store.dispatch('fetchListData', data)
    },
    // 获取滚动条位置
    getScrollTop() {
      let scrollTop = 0
      let bodyScrollTop = 0
      let documentScrollTop = 0
      if (document.body) {
        bodyScrollTop = document.body.scrollTop
      }
      if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop
      }
      scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop
      return scrollTop
    },
    // 获取滚动条高度
    getScrollHeight() {
      let scrollHeight = 0
      let bodyScrollHeight = 0
      let documentScrollHeight = 0
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight
      }
      if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
      return scrollHeight
    },
    // 获取屏幕高度
    getWindowHeight() {
      let windowHeight = 0
      if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight
      } else {
        windowHeight = document.body.clientHeight;
      }
      return windowHeight
    }
  },
  mounted() {
    // const loading = document.getElementById('loading')
    window.onscroll = () => {
    
      if (this.getScrollTop() + this.getWindowHeight() === this.getScrollHeight() && this.$route.path === '/list') {
        this.page++
        debugger
        this.fetchListData(this.page)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.list-wrap {
  background-color: #fff;
  padding: 30px;
  .wrap-left {
    float: left;
    width: 364px;
    margin-right: 20px;
    border: 1px solid #eee;
    .home-title {
      padding-left: 30px;
      line-height: 60px;
      border-bottom: 1px solid #eee;
      &:before {
        left: 15px;
      }
    }
  }
  .wrap-center {
    .wrap-left;
  }
  .wrap-right {
    .wrap-left;
    margin-right: 0;
  }
  .list-item {
    li {
      border-bottom: 1px solid #eee;
      padding: 20px 10px 20px 20px;
      overflow: hidden;
      position: relative;
      transition: all 0.3s;
      &>i {
        content: '';
        width: 60px;
        height: 60px;
        background: url('../../assets/icon/list_number_icon.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        line-height: 30px;
        text-align: left;
        text-indent: 5px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
      }
      &:last-child {
        border-bottom: 0;
      }
      .li-left {
        float: left;
        i {
          display: block;
          width: 80px;
          height: 80px;
          background-size: 100% 100%;
          border-radius: 15px;
          background-repeat: no-repeat;
          margin-right: 20px;
        }
      }
      .li-center {
        float: left;
        padding-top: 5px;
        width: 150px;
        h3 {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          line-height: 36px;
          color: #ffa93a;
        }
        .ios {
          color: #c6e2a6;
          font-size: 20px;
          margin-right: 10px;
        }
        .android {
          color: #9de1f5;
          font-size: 18px;
        }
        .h5-label {
          span {
            &:nth-child(1) {
              margin-right: 10px;
            }
          }
        }
        .h5-online {
          line-height: 1;
          font-size: 14px;
          font-weight: 600;
          color: #999;
        }
      }
      .li-right {
        float: right;
        width: 80px;
        a {
          display: block;
          line-height: 32px;
          color: #fff;
          background: #ffa93a;
          text-align: center;
          font-size: 16px;
          border-radius: 5px;
          margin-top: 15px;
        }
        p {
          line-height: 32px;
          color: #999;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
        }
        .open-h5-game {
          margin-top: 25px;
        }
      }
      .li-bottom {
        width: 100%;
        display: block;
        margin-top: 100px;
        padding-top: 10px;
        border-top: 1px solid #eee;
        overflow: hidden;
        p {
          font-size: 14px;
          font-weight: 600;
          line-height: 32px;
          text-align: center;
        }
        .bottom-left {
          float: left;
          width: 130px;
          margin-right: 20px;
          img {
            width: 100%;
            display: block;
          }
        }
        .bottom-right {
          width: 175px;
          float: left;
          a {
            display: block;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            font-size: 14px;
            color: #fff;
            margin-top: 15px;
            &:nth-child(2) {
              background: #88d42f;
              i {
                font-size: 22px;
                vertical-align: middle;
              }
            }
            &:nth-child(3) {
              background: #2cd0ff;
            }
          }
          i {
            font-size: 24px;
            margin-right: 10px;
            vertical-align: sub;
          }
          .pc-h5-game {
            margin-top: 45px;
          }
        }
      }
    }
    .item-1 {
      &>i {
        background: url('../../assets/icon/number_1_activate.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-2 {
      &>i {
        background: url('../../assets/icon/number_2_activate.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-3 {
      &>i {
        background: url('../../assets/icon/number_3_activate.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-4 {
      &>i {
        background: url('../../assets/icon/list_4_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-5 {
      &>i {
        background: url('../../assets/icon/list_5_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-6 {
      &>i {
        background: url('../../assets/icon/list_6_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-7 {
      &>i {
        background: url('../../assets/icon/list_7_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-8 {
      &>i {
        background: url('../../assets/icon/list_8_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-9 {
      &>i {
        background: url('../../assets/icon/list_9_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .item-10 {
      &>i {
        background: url('../../assets/icon/list_10_icon.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.loading-spin {
  line-height: 100px;
  font-size: 16px;
  color: #000;
  text-align: center;
}
</style>


